<template>
<!--密码键盘界面-->
<el-dialog :title="title" :visible.sync="pageVisible" :close-on-click-modal="false" width="200">
    <div class="main">
        <div class="top">
            <el-input v-model="loginPwd" autocomplete="off" type="password" clearable prefix-icon="iconfont icon-denglushimima" @keyup.enter.native="handleConfirmKey()"></el-input>
        </div>
        <div>
            <el-button type="primary" style="width:100%;" @click="handleNumberKey(7)">7</el-button>
        </div>
        <div>
            <el-button type="primary" style="width:100%;" @click="handleNumberKey(8)">8</el-button>
        </div>
        <div>
            <el-button type="primary" style="width:100%;" @click="handleNumberKey(9)">9</el-button>
        </div>
        <div>
            <el-button type="primary" style="width:100%;" @click="handleNumberKey(4)">4</el-button>
        </div>
        <div>
            <el-button type="primary" style="width:100%;" @click="handleNumberKey(5)">5</el-button>
        </div>
        <div>
            <el-button type="primary" style="width:100%;" @click="handleNumberKey(6)">6</el-button>
        </div>
        <div>
            <el-button type="primary" style="width:100%;" @click="handleNumberKey(1)">1</el-button>
        </div>
        <div>
            <el-button type="primary" style="width:100%;" @click="handleNumberKey(2)">2</el-button>
        </div>
        <div>
            <el-button type="primary" style="width:100%;" @click="handleNumberKey(3)">3</el-button>
        </div>
        <div>
            <el-button type="primary" style="width:100%;" @click="handleDeleteKey()">DEL</el-button>
        </div>
        <div>
            <el-button type="primary" style="width:100%;" @click="handleNumberKey(0)">0</el-button>
        </div>
        <div>
            <el-button type="primary" style="width:100%;" @click="handleConfirmKey()">{{$t("home.user.noLogin.pwdLoginDialog.enterBtn")}}</el-button>
        </div>
    </div>
</el-dialog>
</template>

<script>
import {
    staffLogin
} from '../api/api';
export default {
    data() {
        return {
            title: "",
            loginUserName: '',
            loginPwd: '',
            pageVisible: false,
            addLoading: false
        }
    },
    methods: {
        //显示界面
        showPwdKeyboardPage(staff) {
            this.title = "【" + staff.realName + "】" + this.$t("home.user.noLogin.pwdLoginDialog.title");
            this.loginUserName = staff.id;
            this.loginPwd = '';
            this.pageVisible = true;
        },
        handleNumberKey(number) {
            this.loginPwd = this.loginPwd + number;
        },
        handleDeleteKey() {
            if (!this.loginPwd.length) {
                return false;
            }
            this.loginPwd = this.loginPwd.substring(0, this.loginPwd.length - 1);
        },
        handleConfirmKey: function () {
            var loginParams = {
                staffId: this.loginUserName,
                userPwd: this.loginPwd
            };
            staffLogin(loginParams).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    var token = res.data.userToken;
                    sessionStorage.setItem("userToken", token);
                    this.$parent.dialogLoginSuccessEvent();
                    this.pageVisible = false;
                }
            });
        }
    },
    created() {
        let that = this;
        document.onkeydown =function(e){
            e = window.event || e;
            //验证在主界面并且密码键对话框显示的情况下，按的键是回车键enter
            if(that.pageVisible==true && that.$route.path=='/home'&&(e.code=='Enter'||e.code=='enter')){
                that.handleConfirmKey();
            }
        }
    }
}
</script>

<style scoped>
.main {
    background-color: #012547;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    color: #ffffff;
    grid-gap: 2px;
    padding: 2px;
}

.main div {
    background: #409EFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top {
    grid-column-start: 1;
    grid-column-end: 4;
    background-color: #012547;
}
</style>
